import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text } from '@tarojs/components'
import { AtList, AtListItem, AtNoticebar } from 'taro-ui'

import CTopbar from '../../../components/CTopBar/index'
import { get_my_wallet_info_api } from './service'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import './index.scss'

/**
 * 我的测评界面
 */
interface IWalletData {
  totalAmount: number
  withdrawalAmount: number
  noAmount: number
}

interface I {
  wallet_data: IWalletData
}

interface WalletRecords {
  state: I
}

class WalletRecords extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = { wallet_data: { totalAmount: 0, withdrawalAmount: 0, noAmount: 0 } }
  }

  componentDidMount() {
    this.get_my_wallet()
  }

  async get_my_wallet() {
    await get_my_wallet_info_api().then(({ result, data }) => {
      console.log(data)
      if (result === 1999) {
        this.setState({ wallet_data: data })
      } else {
        Taro.showToast({
          icon: 'none',
          title: '网络错误，请稍后重试！',
          mask: true,
        })
      }
    })
  }
  goto_wallet_records() {
    Taro.navigateTo({
      url: '/pages/My/MyWallet/WalletRecords/index',
    })
  }

  render() {
    const { wallet_data } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的钱包' showBack></CTopbar>
        </View>
        <View className='main'>
          <AtNoticebar close={true} single={true} marquee={true} icon='volume-plus'>
            钱包余额在当日19点之后结算，系统会有延迟，请耐心等待！
          </AtNoticebar>
          <Text className='main_title'>钱包</Text>
          <Text className='main_company'>余额（元）</Text>

          <View className='main_money'>
            <View className='main_balance'>
              <Text>{wallet_data.totalAmount}</Text>
              <Text className='main_balance_title'>总金额</Text>
            </View>
            <View className='main_balance'>
              <Text>{wallet_data.withdrawalAmount}</Text>
              <Text className='main_balance_title'>可提现金额</Text>
            </View>
            <View className='main_balance'>
              <Text>{wallet_data.noAmount}</Text>
              <Text className='main_balance_title'>不可提现金额</Text>
            </View>
          </View>
        </View>
        <View>
          <AtList>
            <AtListItem title='钱包记录' arrow='right' onClick={this.goto_wallet_records.bind(this)} />
            <AtListItem title='充值' arrow='right' />
            <AtListItem title='提现' arrow='right' />
            <AtListItem title='优惠券' arrow='right' />
          </AtList>
        </View>
      </View>
    )
  }
}

export default WalletRecords
